<template>
	<div class="decorate-goods-promotion"
      :style="{padding:tplItemData.modulePadding + 'px ' + tplItemData.levelPadding + 'px'}" >
    <div class="goods-promotion-item" v-for="(item,index) in tplItemData.dataset" :key="index">
      <div class="goods-promotion-goods" v-for="(goods,goodsIndex) in item.goodslist" :key="goodsIndex">
        <div class="goods-promotion-img" @click="openLink(goods.link)">
          <!-- 没有上传图片时显示商品图片 -->
          <img :src="item.is_compress == 1 ?`${item.pic}480x480`:item.pic" alt="" v-if="item.pic.length>0" />
          <img :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic" alt="" v-else />
        </div>
        <div  class="goods-promotion-info">
          <div class="goods-title" @click="openLink(goods.link)">{{goods.title}}</div>
          <div class="goods-promotion-tip goods-labels" v-if="goods.item_labels.length>0"><span>{{goods.item_labels}}</span></div>
          <div class="goods-promotion-bottom">
            <div class="price-box">
              <div class="price" v-html="scaleGoodsPriceFn(goods.price)"></div>
              <div class="original_price">原价{{goods.original_price}}</div>
            </div>
            <div class="btn-box">
              <van-button round class="btn goods-btn" @click="openLink(goods.link)">去抢购</van-button>
              <van-button round class="btn promotion-btn" @click="handlePromotion(goods)">{{item.btnTxt || '推广'}}</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品分享二维码弹窗 -->
    <goods-code :visible.sync="goodsCodeDialogVisible" :codeData="qrcode"></goods-code>
  </div>
</template>

<script>
import { scaleGoodsPrice } from '@/utils/index'
import goodsCode from '@/views/item/components/goodsCode'
import Storage from '@/utils/store'
import { wxItemQrCode } from '@/api/small/common'
import { openPage} from '@/utils/utils'
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {
    goodsCode
  },
  data() {
    return {
      goodsCodeDialogVisible: false,
      qrcode: ''
    }
  },
  props: {
    tplItemData: {
      type: Object // 传入的数据类型
    }
  },
  created() {

  },
  methods: {
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    // 跳转链接
    openLink(link) {
      openPage(link)
    },
    // 点击去推广
    handlePromotion(goods) {
      // activity:1秒杀，2限时打折，3砍价，4试用，5预售，7周期购，8一口价，99拼团
      let activity = 6 // 无活动6
      if (goods.is_miao == 1) {
        activity = 1
      } else if (goods.discount && goods.discount != 10) {
        activity = 2
      } else if (goods.is_bargin && goods.is_bargin == 1) {
        activity = 3
      } else if (goods.is_try && goods.is_try == 1) {
        activity = 4
      } else if (goods.presale_info) {
        activity = 5
      } else if (goods.is_cycle && goods.is_cycle == 1) {
        activity = 7
      } else if (goods.is_packageprice && goods.is_packageprice == 1) {
        activity = 8
      } else if (goods.isGroup == 1) {
        activity = 99
      }
      // 小程序获取商品海报
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      wxItemQrCode({item_id: goods.item_id, activity: activity}).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.qrcode = res.data.path
          this.goodsCodeDialogVisible = true;
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>
<style lang='scss'>
.decorate-goods-promotion{
  .goods-promotion-info{
    .price-scale{
      font-size:36px;
      .num-font{
        font-size:48px;
      }
    } 
  }
}
</style>
<style lang='scss'>
@import "src/styles/mixin";
  .decorate-goods-promotion{
    .goods-promotion-item{
      margin-top:20px;
      overflow: hidden;
      border-radius:20px;
      background:#fff;
      &:first-child{
        margin-top:0;
      }
      .goods-promotion-img{
        img{
          display:block;
          width:100%;
        }
      }
      .goods-promotion-info{
        padding:0 16px 20px;
        .goods-title{
          margin:24px 0 0;
          @include lineClamp(28px,40px,2);
        }
        .goods-promotion-bottom{
          display:flex;
          justify-content: space-between;
          margin-top:10px;
          .original_price{
            margin-left:2px;
            padding:4px 0 4px 4px;
            font-size:22px;
            text-decoration: line-through;
            color:#999;
          }
          .btn-box{
            padding-top:6px;
            font-size:0;
            .btn{
              height:56px;
              padding:0 32px;
              box-sizing: border-box;
              font-size:24px;
              border-color:#F30C23;
              color:#F30C23;
              &.promotion-btn{
                margin-left:20px;
                border:0;
                color:#fff;     
                background: linear-gradient(270deg, #E90104 0%, #FE1B49 100%, #FE1B49 100%);
              }
            }
          }
        }
      }
    }
  }
</style>
